<template>
  <div>
    <div>
      <el-select
        v-model="searchMode"
        placeholder="请选择订单类型"
        style="width: 150px; margin-right: 10px"
      >
        <el-option value="已支付" label="已支付"></el-option>
        <el-option value="已发货" label="已发货"></el-option>
        <el-option value="已收货" label="已收货"></el-option>
      </el-select>
      <el-input v-model="searchText" @keyup.enter="load" style="width: 200px">
        <template #prefix>
          <i class="el-input__icon iconfont icon-r-find"></i>
        </template>
      </el-input>
      <el-button @click="reset" type="warning" style="margin: 10px">
        重置
      </el-button>
      <el-button @click="load" type="primary" style="margin: 10px">
        搜索
      </el-button>
    </div>

    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="50"
        sortable
      ></el-table-column>
      <el-table-column
        prop="orderNo"
        label="订单编号"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="totalPrice"
        label="总价"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="userId"
        label="下单人id"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="linkUser"
        label="联系人"
        width="150"
      ></el-table-column>
      <el-table-column prop="linkPhone" label="联系电话"></el-table-column>
      <el-table-column
        prop="linkAddress"
        label="送货地址"
        width="300"
      ></el-table-column>
      <el-table-column prop="state" label="状态" width="100">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.state === '已支付'">{{
            scope.row.state
          }}</el-tag>
          <el-tag type="primary" v-if="scope.row.state === '已发货'">{{
            scope.row.state
          }}</el-tag>
          <el-tag type="info" v-if="scope.row.state === '已收货'">{{
            scope.row.state
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="下单时间"></el-table-column>
      <el-table-column fixed="right" label="操作" width="250">
        <template #default="scope">
          <el-button type="primary" @click="showDetail(scope.row)"
            >详情</el-button
          >
          <el-popconfirm
            @confirm="delivery(scope.row)"
            title="确定发货吗？"
            v-if="scope.row.state === '已支付'"
          >
            <template #reference>
              <el-button type="primary" style="margin-left: 10px"
                >发货</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[3, 5, 8, 10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog v-model="dialogFormVisible">
      <el-table :data="detail" background-color="black">
        <el-table-column label="图片" width="150">
          <template #default="scope">
            <img :src="baseApi + scope.row.img" min-width="100" height="100" />
          </template>
        </el-table-column>
        <el-table-column prop="goodId" label="商品id"></el-table-column>
        <el-table-column prop="goodName" label="商品名称"></el-table-column>
        <el-table-column prop="standard" label="商品规格"></el-table-column>
        <el-table-column prop="price" label="单价"></el-table-column>
        <el-table-column prop="discount" label="折扣"></el-table-column>
        <el-table-column label="实价">
          <template #default="scope">
            {{ scope.row.price * scope.row.discount }}
          </template>
        </el-table-column>
        <el-table-column prop="count" label="数量"></el-table-column>
        <el-table-column label="总价">
          <template #default="scope">
            {{ scope.row.price * scope.row.discount * scope.row.count }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useStore } from "vuex";

const store = useStore();
const url = "/api/order/";

// Reactive data
const searchMode = ref<string>("");
const searchText = ref<string>("");
const tableData = ref<any[]>([]);
const pageNum = ref<number>(1);
const pageSize = ref<number>(8);
const total = ref<number>(0);
const dialogFormVisible = ref<boolean>(false);
const detail = ref<any[]>([]);
const baseApi = ref<string>(store.state.baseApi);

// Methods
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  load();
};

const handleCurrentChange = (page: number) => {
  pageNum.value = page;
  load();
};

const reset = () => {
  searchMode.value = "";
  searchText.value = "";
  load();
};

const load = () => {
  store.state.request
    .get(url + "page", {
      params: {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        orderNo: searchText.value,
        state: searchMode.value,
      },
    })
    .then((res: any) => {
      tableData.value = res.data.records || [];
      total.value = res.data.total;
    })
    .catch((e: any) => {
      store.state.message.error(e.response?.data || e);
    });
};

const showDetail = (row: any) => {
  store.state.request
    .get("/api/order/orderNo/" + row.orderNo)
    .then((res: any) => {
      if (res.code === "200") {
        detail.value = [res.data];
        dialogFormVisible.value = true;
      }
    });
};

const delivery = (order: any) => {
  store.state.request
    .get("/api/order/delivery/" + order.orderNo)
    .then((res: any) => {
      if (res.code === "200") {
        store.state.message.success("成功发货");
        order.state = "已发货";
      }
    });
};

// Lifecycle
onMounted(() => {
  load();
});
</script>

<style scoped></style>
